<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.dateTime"
        style="positon:relative;top:1px"
        type="daterange"
        format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
      />
      <el-select v-model="listQuery.timeUnit" style="width: 140px" placeholder="单位" class="filter-item">
        <el-option value="1">天</el-option>
        <el-option value="2">周</el-option>
        <el-option value="3">月</el-option>
      </el-select>
      <el-select v-model="listQuery.orgId" style="width: 140px" placeholder="选择机构" class="filter-item">
        <el-option
          v-for="(item,index) in OrgList"
          :key="index"
          :label="item.orgName"
          :value="item.id"
        />
      </el-select>
      <el-select v-model="listQuery.type" style="width: 140px" placeholder="类型" class="filter-item">
        <el-option
          v-for="(item,index) in typeList"
          :key="index"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-select v-model="listQuery.userId" style="width: 140px" placeholder="userId" class="filter-item">
        <el-option value="0">0</el-option>
        <el-option value="1">1</el-option>
        <el-option value="2">2</el-option>
      </el-select>
      <el-input v-model="listQuery.jobNUmber" placeholder="工号" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <!-- <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        导出
      </el-button> -->
      <!-- <el-button class="filter-item" type="primary" icon="el-icon-position">
        数据分析
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-position">
        周数据分析
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-position">
        十五天数据分析
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-position">
        月数据分析
      </el-button> -->
    </div>
    <el-row>
      <el-col>
        <div class="grid-content bg-purple">
          <div class="title-container">
            <span>满意柱状图</span>
          </div>
          <div class="chart-container">
            <chart v-if="list.length>0" id="chart1" height="300px" width="100%" :set-option-list="list" />
            <!-- <div id="chart1" height="300px" width="100%" /> -->
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style >
  .filter-container .filter-item{
    margin-bottom:0
  }
</style>
<script>
import Chart from '@/components/Charts/BarChart'
// import echarts from 'echarts'
// import resize from './mixins/resize'
import waves from '@/directive/waves' // waves directive
import { getSatisfactionRate } from '@/api/decisionala'
import { getAllOrgList, getTypeList } from '@/api/public'
export default {
  name: 'Satisfiedrate',
  components: { Chart },
  directives: { waves },
  data() {
    return {
      listQuery: {
        dateTime: '',
        timeUnit: '',
        orgId: 0,
        type: '',
        userId: 0,
        jobNUmber: ''
      },
      OrgList: [],
      typeList: getTypeList(),
      list: []
    }
  },
  created() {
    getAllOrgList().then(res => {
      this.OrgList = res.data
    })
    this.handleFilter()
  },
  methods: {
    handleFilter() {
      this.list = []// 重置数据
      const { dateTime, orgId, type, userId, jobNUmber, timeUnit } = this.listQuery
      getSatisfactionRate({
        startTime: (dateTime[0] ? dateTime[0] : ''),
        endTime: (dateTime[1] ? dateTime[1] : ''),
        type,
        userId,
        jobNUmber,
        orgId
      }).then(res => {
        const { code, data, message } = res
        console.log('TCL: handleFilter -> data', data)
        if (code === '200') {
          this.$message({
            message: message,
            type: 'success'
          })
        } else {
          this.$message({
            message: message,
            type: 'warning'
          })
        }
        this.list = data
        console.log('TCL: handleFilter -> this.list', this.list)
      })
    }

  }
}
</script>
